<%--
  Created by IntelliJ IDEA.
  User: liujiajia
  Date: 2016/12/26
  Time: 上午10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计首页</title>
    <meta charset="UTF-8">
    <title>Tabbar</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
</head>
<body>

<header class="m-navbar" >
    <span><i class="home-crt"></i></span>
    <div class="navbar-center" ><span class="navbar-title">商户数据</span></div>
</header>

<section class="g-scrollview">

    <div id="B_Tab" class="m-tab demo-pitch">
        <ul class="tab-nav">
            <li class="tab-nav-item tab-active"><a href="javascript:;">基本数据</a></li>
            <li class="tab-nav-item"><a href="javascript:;">券点数据</a></li>
        </ul>
        <div class="tab-panel">
            <%--基本数据--%>
            <div class="tab-panel-item tab-active">
                <div class="m-cell demo-small-pitch" style="background-color: #D75642;height: 60px">
                    <div class="cell-item">
                        <div class="cell-left"><h2>日活商户</h2></div>
                        <div class="cell-right"><h3>23213</h3></div>
                    </div>
                </div>
                <div class="m-cell demo-small-pitch" style="background-color: #F5C50F;height: 60px">
                    <div class="cell-item">
                        <div class="cell-left"><h2>日活门店</h2></div>
                        <div class="cell-right"><h3>1323412</h3></div>
                    </div>
                </div>
                <div class="m-cell demo-small-pitch" style="background-color: #64C2E5;height: 60px">
                    <div class="cell-item">
                        <div class="cell-left"><h2>日活用户</h2></div>
                        <div class="cell-right"><h3>324</h3></div>
                    </div>
                </div>

                <div class="m-celltitle">统计周期</div>
                <aside class="demo-tip">
                    数据截止：2016-12-26
                </aside>
                <div class="m-button" style="float: right;">
                    <a href="javascript:;" class="btn btn-hollow">当日</a>
                    <a href="javascript:;" class="btn btn-hollow">7天</a>
                    <a href="javascript:;" class="btn btn-hollow">30天</a>
                </div>
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div id="b_main" style="width: 370px;height:400px;"></div>
            </div>
            <%--券点数据--%>
                <div class="tab-panel-item">
                    <div class="m-cell demo-small-pitch" style="background-color: #D75642;height: 60px">
                        <div class="cell-item">
                            <div class="cell-left"><h2>当日发券量</h2></div>
                            <div class="cell-right"><i class="">¥</i> <h3>23213</h3></div>
                        </div>
                    </div>
                    <div class="m-cell demo-small-pitch" style="background-color: #F5C50F;height: 60px">
                        <div class="cell-item">
                            <div class="cell-left"><h2>发券收入</h2></div>
                            <div class="cell-right"><i class="">¥</i> <h3>1323412</h3></div>
                        </div>
                    </div>


                    <div class="m-celltitle">统计周期</div>
                    <aside class="demo-tip">
                        数据截止：2016-12-26
                    </aside>
                    <div class="m-button" style="float: right;">
                        <a href="javascript:;" class="btn btn-hollow">当日</a>
                        <a href="javascript:;" class="btn btn-hollow">7天</a>
                        <a href="javascript:;" class="btn btn-hollow">30天</a>
                    </div>
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="q_main" style="width: 370px;height:400px;"></div>

                </div>

        </div>
    </div>
</section>


<jsp:include page="../mamin/footer.jsp?page=0"></jsp:include>
</body>
<script src="http://123.206.127.237:85/ydui/ecaharts/echarts.common.min.js"></script>
<script src="http://123.206.127.237:85/ydui/ecaharts/dark.js"></script>
<script>
    /**
     * Javascript API调用Tab
     */
    !function ($) {
        var $tab = $('#B_Tab');
        $tab.tab({
            nav: '.tab-nav-item',
            panel: '.tab-panel-item',
            activeClass: 'tab-active'
        });

        /*
         $tab.find('.tab-nav-item').on('open.ydui.tab', function (e) {
         console.log('索引：%s - [%s]正在打开', e.index, $(this).text());
         });
         */

        $tab.find('.tab-nav-item').on('opened.ydui.tab', function (e) {
            console.log('索引：%s - [%s]已经打开了', e.index, $(this).text());
        });


        var xData = function() {
            var data = [];
            for (var i = 1; i < 30; i++) {
                data.push(i + "天");
            }
            return data;
        }();



        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('b_main'));
        var myQChart = echarts.init(document.getElementById('q_main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ' '
            },
            tooltip: {},
            /* legend: {
             data:['销量']
             },*/
            xAxis: {
                data: xData
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myQChart.setOption(option);

    }(jQuery);
</script>

</html>
